<template>
    <div class="grzx">
        <div class="bankuai">
        </div>
        <div class="xinxi">
            <div class="xinxitou">
                <div class="touxiang"><img :src="brr.image" alt="" width="100px"></div>
                <div class="jianjie">{{brr.remark}}</div>
            </div>
            <div class="xinmin">
                <div><span>姓名</span> {{brr.name}}</div>
                <div><span>联系方式</span> {{brr.phone}}</div>
            </div>
        </div>
        <div class="gongneng">
             <div v-for="(item,index) in arr" :key='index' class="dange" @click="fangfa(item.pd)">
                 <div>
                 <img :src="require('../assets/images/'+item.tu)" alt="" height="15px">
                 <span>{{item.biaoti}}</span>
                 </div>
                 <div>
                     <img src="../assets/images/More.png" alt="" height="9px">
                 </div>
             </div>
        </div>
        <van-button type="primary" size="large" @click="tuichu">退出登录</van-button>
    </div>

</template>

<script>
import { Toast } from 'vant';
export default {
    props:['brr'],
    data () {
        return {
           arr:[
               {biaoti:'个人信息',tu:'Personal information.png',pd:1},
               {biaoti:'支付中心',tu:'形状 2.png',pd:1},
               {biaoti:'修改密码',tu:'change Password.png',pd:1},
               {biaoti:'版本信息',tu:'版本信息.png',pd:2},
               {biaoti:'清除缓存',tu:'组 16.png',pd:1}
           ]
 
        }
    },
    methods:{
        tuichu(){
           localStorage.setItem('token','')
            this.$router.push('/')
        },
        fangfa(i){
             if(i==2){
             this.$router.push('/banben')
             }else{
                 Toast.fail('该功能未开发');
             }
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .grzx{
        text-align: center;
        width: 100%;
        .van-button{
            margin-top: 69px;
            background:#e9e9e9;
            border: none;
            width: 345px;
            color: #666;
            font-weight: 700;
        }
        .gongneng{
            border-radius: 30px;
            overflow: hidden;
            margin-top: 97px;
            .dange{
               display: flex;
               justify-content: space-between;
               width: 345px;
               margin: auto;
               background: #fff;
               height: 45px;
               line-height: 45px;
               border-bottom:1px solid #e5e5e5;
               box-sizing: border-box;
               padding: 0 15px;
               font-size: 14px;
               font-weight: 700;
               span{
                   margin-left: 9px;
               }
             }
        }
        .bankuai{
            height: 136px;
            width: 100%;
            background: #093389;
        }
        .xinxi{
            position: absolute;
            background: #fff;
            border-radius: 10px ;
            width: 345px;
            height: 145px;
            padding: 0 16px;
            box-sizing: border-box;
            top: 80px;
            left:50% ;
            transform: translate(-50%);
            .xinxitou{
                height: 95px;
                padding-top: 69px;
                box-sizing: border-box;
                .jianjie{
                    color: #656565;
                    font-size: 14px;
                    padding-bottom: 15px;
                    border-bottom: 1px  dashed #e5e5e5;
                }
            }
           .xinmin{
               display: flex;
               justify-content: space-between;
               height: 49px;
               line-height: 49px;
               /* font-weight: 700; */
               span{
                   color: #999;
               }
           }
           .touxiang{
               width: 110px;
               height: 110px;
               border-radius: 50%;
               /* background: #fff; */
               /* opacity: 0.1; */
               background-color: rgba(255, 255, 255, 0.2);
               box-shadow:-10px #e7e7e7;
               overflow: hidden;
               position:absolute; 
               top: -50px;
               left: 50%;
               transform: translate(-50%);
               text-align: center;
               img{
                   margin-top: 5px;
                   border-radius: 50%;
               }
           }
        }
    }
</style>